<template>
    <section>
        <goback :getName='goName'></goback>
        <div v-show="ifShowRule" class="detailRule" ref="detailRule" :style="{height: detailRuleHeight}">
            <img src="../../assets/mall/gzdt.png">
            <div class="ruleInfo">
                <div class="ruleTitle">规则说明</div>
                <div class="ruleContent">
                    <p>凡是在【即买即送】专区中购买商品成功后，即可获得“你买我就送”的资格。用户在规定期限内，完成该商品累积打卡的天数，可免费获得一份本产品，否者视为打卡失败！其中不同的商品需累积打卡的天数将有所不同。</p>
                    <p class="ruleNum">一、参与流程</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;</span> 1、选择商品立即购买。</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;</span> 2、购买成功后在【我的】页面中对该商品进行打卡，满足打卡要求后即免费获得一份该产品。</p>
                    <p class="ruleNum">二、打卡结果及奖励</p>
                    <p class="ruleNum">&nbsp;&nbsp;&nbsp; 1、打卡成功</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;</span>购买商品后，在规定时间内完成该商品打卡要求，视为打卡成功。3日内在【即买即送-我的】中免费领取该商品。</p>
                    <p class="ruleNum">&nbsp;&nbsp;&nbsp; 2、打卡失败</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;</span>购买商品后，在规定时间内未完成该商品打卡要求，视为打卡失败。</p>
                </div>
                <div class="closeBtn">
                    <img src="../../assets/mall/gzgb.png" @click="closeRule">
                </div>
            </div>
        </div>
        <div class="top-img" ref="topImg" :style="{height: topImgHeight}">
            <img src="../../assets/jmjs/banner.png">
            <div class="rule-img" @click="rule">
                <img src="../../assets/jmjs/hdgz.png">
            </div>
        </div>
        <div class="jmjs" ref="jmjs">
            <div class="navigation">
                <div v-for="(n,i) of ['商品','我的']" :key="i" @click="nav(i)" :class="{choosedNav:i===choosed}">{{n}}</div>
            </div>
        </div>
        <div class="sort-div" v-if="choosed===0" ref="sortDiv">
            <div>
                <div class="sort-word" @click="pSort">价格</div>
                <div class="arrowLine1" v-if="priceDESC&&priceOrSalse" @click="pSort"></div>
                <div class="arrowLine2" v-if="!priceDESC&&priceOrSalse" @click="pSort"></div>
                <div class="arrowLine3" v-if="!priceOrSalse"></div>
            </div>
            <div>
                <div class="sort-word" @click="sSort">销量</div>
                <div class="arrowLine1" v-if="salesDESC&&!priceOrSalse" @click="sSort"></div>
                <div class="arrowLine2" v-if="!salesDESC&&!priceOrSalse" @click="sSort"></div>
                <div class="arrowLine3" v-if="priceOrSalse"></div>
            </div>
        </div>
        <div class="sort-div" v-if="choosed===1" ref="sortDiv">
            <div>
                <div class="sort-word" @click="selectState" :class="{choosedNav:!isEnded}">进行中</div>
                <div class="arrowLine1" @click="selectState" v-if="!isShowChoose"></div>
                <div class="arrowLine2" @click="selectState" v-if="isShowChoose"></div>
            </div>
            <div>
                <div class="sort-word" @click="selectEnd" :class="{choosedNav:isEnded}">已结束</div>
                <div class="arrowLine3"></div>
            </div>
            <div class="chooseState" v-if="isShowChoose">
                <div v-for="(n,i) of ['已打卡','未打卡','未领取']" :key="i" @click="chooseState(i)" :class="{choosedNav:i===choosedState}">
                    <span>{{n}}</span>
                    <span class="rightLetter" v-if="i===choosedState">√</span>
                </div>
            </div>
        </div>
        <div class="goodbgc" v-if="choosed===0" ref="goodses" :style="{height:divHeight}">
            <section v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10" infinite-scroll-immediate-check="loading">
                <div class="goodses-list">
                    <div v-for="(goods,index) of goodses" :key="index" class="commodity" @click="turnPage(goods.productId)">
                        <div class="thumbnailDiv">
                            <div>
                                <img :src="goods.thumbnail">
                            </div>
                        </div>
                        <div class="goodses-detail_">
                            <div class="lDiv">
                                <div class="goodses-name">
                                    <span>{{goods.name}}</span>
                                </div>
                                <div class="goodses-price">
                                    <span>￥{{(goods.defaultPrice / 100).toFixed(2)}}</span>
                                </div>
                            </div>
                            <div class="rDiv">
                                <div class="buyGoods">
                                    <span>购买商品</span>
                                </div>
                                <div class="goodsTips">
                                    <span>(购买{{goods.buyCount}}{{goods.productUnit}}即送1{{goods.productUnit}})</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <div class="goodbgc" v-if="choosed===1" ref="goodses" :style="{height:divHeight}">
            <section v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10" infinite-scroll-immediate-check="loading">
                <div class="goodses-list">
                    <div v-for="(goods,index) of goodses" :key="index" class="commodity" :style="goods.backgroundDiv">
                        <div class="thumbnailDiv">
                            <div>
                                <img :src="goods.thumbnail">
                            </div>
                        </div>
                        <div class="goodses-detail_">
                            <div class="lDiv">
                                <div class="goodses-name">
                                    <span>{{goods.name}}</span>
                                </div>
                                <div class="goodes-register">
                                    <span>已打卡 <span :class="{choosedNav:!isEnded}">{{goods.dkCount}}</span>/{{goods.dkFrequency}}天</span>
                                </div>
                            </div>
                            <div class="rDiv">
                                <div v-if="isEnded" class="calendar" @click="calendar(goods.buyDkProductId)">
                                    <div class="calendarImg">
                                        <img src="../../assets/jmjs/hrl.png">
                                    </div>
                                    <div class="calendarRecord">打卡记录</div>
                                </div>
                                <div class="buyGoods">
                                    <span @click="register(goods.buyDkProductId)" v-if="goods.isTodayDk===0&&goods.dealState===0">立即打卡</span>
                                    <span class="registered" v-if="goods.isTodayDk===1&&goods.dealState===0">立即打卡</span>
                                    <span v-if="goods.isReceive===null&&goods.dealState===1" @click="receive(goods)">领取</span>
                                </div>
                                <div class="goodsTips_">
                                    <span v-if="goods.dealState===0">( 截止<span class="choosedNav">{{goods.endTime | formatDate}} </span>)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <loadmore v-show="loadingDom"></loadmore>
    </section>
</template>
<script>
    import { InfiniteScroll, Indicator } from 'mint-ui'
    import goback from '../../components/goback'
    import { getDkslProduct, getMyDkProduct } from '../../libs/interface'
    import { userInfoGet, WXShare } from '../../libs/publicMethod'
    import loadmore from '../../components/loadmore'
    export default {
        components: { goback, getDkslProduct, userInfoGet, WXShare, InfiniteScroll, loadmore, Indicator, getMyDkProduct },
        data() {
            return {
                userInfo: userInfoGet(),
                goName: '即买即送',
                loading: false, // 下拉参数
                loadingDom: false,
                offset: sessionStorage.getItem('foundScrollOffset') ? JSON.parse(sessionStorage.getItem('foundScrollOffset')).offset || 0 : 0,
                divHeight: '',
                detailRuleHeight: '',
                topImgHeight: '',
                ifShowRule: false,
                choosed: 0,
                goodses: [],
                priceOrSalse: false,
                priceDESC: true,
                salesDESC: true,
                isShowChoose: false,
                choosedState: 1,
                isEnded: false,
                backgroundDiv: {},
                backgroundDiv1: {
                    backgroundImage: 'url(' + require('../../assets/jmjs/ylq.png') + ')',
                },
                backgroundDiv2: {
                    backgroundImage: 'url(' + require('../../assets/jmjs/yqwl.png') + ')',
                },
                backgroundDiv3: {
                    backgroundImage: 'url(' + require('../../assets/jmjs/wwc.png') + ')',
                },
            }
        },
        methods: {
            closeRule() {
                this.ifShowRule = false
            },
            rule () {
                let vm = this
                vm.ifShowRule = true
                vm.detailRuleHeight = document.documentElement.clientHeight - 38 + 'px'
            },
            nav (i) {
                let vm = this
                vm.isShowChoose = false
                if (vm.choosed === i) return
                vm.backgroundDiv = {}
                vm.isEnded = false
                vm.goodses = []
                vm.$router.replace('/jmjs/' + i)
                vm.choosed = i
                if (i === 1) {
                    vm.choosedState = 1
                }
                vm.loadGoods()
            },
            pSort () {
                let vm = this
                if (vm.priceOrSalse) {
                    vm.priceDESC = !vm.priceDESC
                } else {
                    vm.priceOrSalse = !vm.priceOrSalse
                    vm.priceDESC = true
                }
                vm.loadGoods()
            },
            sSort () {
                let vm = this
                if (vm.priceOrSalse) {
                    vm.priceOrSalse = !vm.priceOrSalse
                    vm.salesDESC = true
                } else {
                    vm.salesDESC = !vm.salesDESC
                }
                vm.loadGoods()
            },
            selectState () {
                let vm = this
                vm.isShowChoose = !vm.isShowChoose
            },
            chooseState (i) {
                let vm = this
                vm.isShowChoose = false
                if (vm.choosedState === i) return
                vm.backgroundDiv = {}
                vm.choosedState = i
                vm.isEnded = false
                vm.loadGoods()
            },
            selectEnd() {
                let vm = this
                if (vm.isEnded)  return
                vm.isEnded = true
                vm.choosedState = ''
                vm.isShowChoose = false
                vm.loadGoods()
            },
            turnPage (id) {
                this.$router.push('/jmjsGoods/' + id)
            },
            register (id) {
                let vm = this
                sessionStorage.removeItem('calendar')
                vm.$router.push('/calendar/' + id)
            },
            receive (obj) {
                let vm = this
                sessionStorage.setItem('jmjs', JSON.stringify({ id: obj.buyDkProductId }))
                vm.$router.push('/jmjsPay/' + obj.skuId + '/1')
            },
            calendar (id) {
                let vm = this
                sessionStorage.setItem('calendar', JSON.stringify({ isReturn: true }))
                vm.$router.push('/calendar/' + id)
            },
            // 上拉加载更多
            loadMore() {
                let vm = this
                // if (sessionStorage.getItem('saleScrollOffset')) return null
                vm.loading = true
                vm.loadingDom = true
                vm.offset += 10
                if (vm.$route.params.id == 0) {
                    let params = {
                        productId: 0,
                        limit: 10,
                        offset: vm.offset,
                        sidx: 'defaultPrice',
                        sord: 'DESC'
                    }
                    if (vm.priceOrSalse) {
                        params.sidx = 'defaultPrice'
                        if (vm.priceDESC) {
                            params.sord = 'DESC'
                        } else {
                            params.sord = 'ASC'
                        }
                    } else {
                        params.sidx = 'sell'
                        if (vm.salesDESC) {
                            params.sord = 'DESC'
                        } else {
                            params.sord = 'ASC'
                        }
                    }
                    getDkslProduct(params, (data) => {
                        if (data.code == 1 && data.payload.length > 0) {
                            vm.$nextTick(() => {
                                data.payload.forEach((item) => {
                                    vm.goodses.push(item)
                                })
                            })
                            vm.loading = false
                        } else {
                            vm.loading = true
                            vm.offset -= 10
                            vm.$toast('暂未请求到数据,请稍后再试')
                        }
                        vm.loadingDom = false
                    })
                }
                if (vm.$route.params.id == 1) {
                    vm.choosed = 1
                    let params = {
                        memberId: vm.userInfo.id,
                        limit: 10,
                        offset: vm.offset,
                        state: 1
                    }
                    if (vm.choosedState === 0) {
                        params.state = 2
                    }
                    if (vm.choosedState === 1) {
                        params.state = 1
                    }
                    if (vm.choosedState === 2) {
                        params.state = 3
                    }
                    if (vm.choosedState === '') {
                        params.state = -1
                    }
                     getMyDkProduct(params, (data) => {
                        if (data.code == 1 && data.payload.length > 0) {
                            vm.$nextTick(() => {
                                data.payload.forEach((item) => {
                                    vm.goodses.push(item)
                                    if (item.dealState === 1 && item.isReceive === 1) {
                                        item.backgroundDiv = vm.backgroundDiv1
                                    }
                                    if (item.dealState === 1 && item.isReceive === -1) {
                                        item.backgroundDiv = vm.backgroundDiv2
                                    }
                                    if (item.dealState === -1) {
                                        item.backgroundDiv = vm.backgroundDiv3
                                    }
                                })
                            })
                            vm.loading = false
                        } else {
                            vm.loading = true
                            vm.offset -= 10
                            vm.$toast('暂未请求到数据,请稍后再试')
                        }
                        vm.loadingDom = false
                    })
                }
            },
            loadGoods () {
                Indicator.open({
                    text: '加载中...',
                    spinnerType: 'fading-circle'
                })
                let vm = this
                vm.$refs.goodses.scrollTop = 0
                vm.loading = false
                vm.offset = 0
                if (vm.$route.params.id == 0) {
                    vm.choosed = 0
                    let params = {
                        productId: 0,
                        limit: 10,
                        offset: 0,
                        sidx: 'defaultPrice',
                        sord: 'DESC'
                    }
                    if (vm.priceOrSalse) {
                        params.sidx = 'defaultPrice'
                        if (vm.priceDESC) {
                            params.sord = 'DESC'
                        } else {
                            params.sord = 'ASC'
                        }
                    } else {
                        params.sidx = 'sell'
                        if (vm.salesDESC) {
                            params.sord = 'DESC'
                        } else {
                            params.sord = 'ASC'
                        }
                    }
                    getDkslProduct(params, (data) => {
                        if (data.code === 1) {
                            Indicator.close()
                            vm.goodses = data.payload
                        } else {
                            vm.$toast('系统异常')
                        }
                    })
                }
                if (vm.$route.params.id == 1) {
                    vm.choosed = 1
                    let params = {
                        memberId: vm.userInfo.id,
                        limit: 10,
                        offset: 0,
                        state: 1
                    }
                    if (vm.choosedState === 0) {
                        params.state = 2
                    }
                    if (vm.choosedState === 1) {
                        params.state = 1
                    }
                    if (vm.choosedState === 2) {
                        params.state = 3
                    }
                    if (vm.choosedState === '') {
                        params.state = -1
                    }
                    getMyDkProduct(params, (data) => {
                        if (data.code === 1) {
                            Indicator.close()
                            vm.goodses = data.payload
                            vm.goodses.forEach((ele)=>{
                                if (ele.dealState===1&&ele.isReceive===1) {
                                    ele.backgroundDiv = vm.backgroundDiv1
                                }
                                if (ele.dealState===1&&ele.isReceive===-1) {
                                    ele.backgroundDiv = vm.backgroundDiv2
                                }
                                if (ele.dealState===-1) {
                                    ele.backgroundDiv = vm.backgroundDiv3
                                }
                            })
                        } else {
                            vm.$toast('系统异常')
                        }
                    })
                }
            }
        },
        mounted() {
            let vm = this
            vm.topImgHeight = vm.$refs.topImg.clientWidth * 32 / 75
            vm.divHeight = document.documentElement.clientHeight - vm.$refs.topImg.offsetTop - vm.topImgHeight - vm.$refs.jmjs.clientHeight - vm.$refs.sortDiv.clientHeight + 'px'
            document.body.style.paddingBottom = 0
            if (sessionStorage.getItem('comeback')) {
                vm.isEnded = true
                vm.choosedState = ''
                sessionStorage.removeItem('comeback')
            }
            vm.loadGoods()
        },
        filters: {
            formatDate(input) {
                var d = new Date(input)
                var year = d.getFullYear()
                var month = d.getMonth() + 1
                var day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate()
                var hour = d.getHours()
                var minutes = d.getMinutes()
                var seconds = d.getSeconds()
                return year + '年' + month + '月' + day + '日'
            }
        }
    }
</script>
<style scoped>
.detailRule{
    position: absolute;
    margin: auto;
    top: 2.4rem;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: rgba(0, 0, 0, .65)
}
.detailRule img{
    margin-top: 5%;
    width: 80%;
    height: 90%;
}
.ruleInfo{
    margin-top: 5%;
    width: 80%;
    height: 90%;
    position: absolute;
    top: -1%;
    right: 0;
    bottom: 0;
    left: 1%;
    margin: auto;
}
.ruleTitle{
    font-size: .95rem;
    color: #F2F2F4;
}
.ruleContent{
    margin: 12% auto 0;
    width: 80%;
    height: 71%;
    margin-bottom: 2%;
    overflow: auto;
    font-size: .8rem;
    line-height: 1.5rem;
    text-align: left;
}
.ruleNum{
    font-weight: bold;
}
.closeBtn{
    position: relative;
    z-index: 10;
    width: 100%;
    margin: auto;
    -moz-box-shadow: 0rem -2rem 2rem -.3rem rgb(255, 255, 255); 
    -webkit-box-shadow: 0rem -2rem 2rem -.3rem rgb(255, 255, 255); 
    box-shadow: 0rem -2rem 2rem -.8rem rgb(255, 255, 255); 
}
.closeBtn img{
    width: 80%;
    height: 100%;
}
.top-img{
    width: 100%;
    position: relative;
}
.top-img img{
    display: block;
    width: 100%;
    height: 100%;
}
.rule-img{
    position: absolute;
    top: 0;
    right: 0;
    width: 5rem;
}
.rule-img img{
    width: 100%;
    height: 100%;
}
.jmjs{
    width: 100%;
    height: 1.6rem;
    padding-top: .2rem;
    background-color: #FF8E6D;
}
.navigation{
    display: flex;
    align-items: center;
    width: 40%;
    height: 1.3rem;
    line-height: 1.5rem;
    margin: 0 auto;
    border: 1px solid #FFFFFF;
    border-radius: .3rem;
    font-size: .8rem;
    color: #FFFFFF;
}
.navigation div{
    width: 50%;
    height: 100%;
}
.choosedNav{
    background-color: #FFFFFF;
    color: #E22419;
}
.sort-div{
    background-color: #fff;
    font-size: .8rem;
    height: 1.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.sort-div>div{
    width: 44%;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* .sort-word{
    transform: scale(.9,.9);
} */
.arrowLine1{
    margin-left: .5rem;
    width: .3rem;
    height: .3rem;
    border-bottom: 1px solid #E22419;
    border-right: 1px solid #E22419;
    transform: rotate(45deg);
}
.arrowLine2{
    margin-left: .5rem;
    width: .3rem;
    height: .3rem;
    border-top: 1px solid #E22419;
    border-left: 1px solid #E22419;
    transform: rotate(45deg);
    margin-top: .3rem;
}
.arrowLine3{
    margin-left: .5rem;
    width: .3rem;
    height: .3rem;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    transform: rotate(45deg);
    margin-top: .3rem;
}
.chooseState{
    position: absolute;
    z-index: 10;
    top: 100%;
    left: 0;
    width: 83%!important;
    height: 6rem;
    display: flex;
    flex-direction: column;
    padding: 0 11% 0 6%;
    -moz-box-shadow: 0rem .2rem .2rem 0rem rgba(185,182,168,0.5); 
    -webkit-box-shadow: 0rem .2rem .2rem 0rem rgba(185,182,168,0.5); 
    box-shadow: 0rem .2rem .2rem 0rem rgba(185,182,168,0.5); 
    background-color: #fff;
}
.chooseState>div{
    height: 2rem;
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.rightLetter{
    transform: scale(.9,.9);
    color: red;
}
.goodbgc{
    background-color: #fff;
    padding-top: .1rem;
    overflow: auto;
}
.goodses-list{
    width: 94%;
    margin: 0 1% 0 5%;
    /* background-color: aqua; */
}
.commodity{
    height: 6.2rem;
    border-bottom: 1px solid #FAFAFA;    
    display: flex;
    /* background-image: url('../../assets/jmjs/ylq.png'); */
    background-size: 34%;
    background-position: 100%;
    background-repeat: no-repeat;
}
.thumbnailDiv{
    /* width: 50%; */
    width: 47%;
}
.thumbnailDiv>div{
    width: 8.6rem;
    height: 6.2rem;
}
.thumbnailDiv img{
    width: 100%;
    height: 100%;
}
.goodses-detail_{
    /* font-size: .7rem; */
    font-size: .8rem;
    color: #333;
    width: 51%;
}
.goodses-name{
    width: 100%;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lDiv{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    height: 45%;
}
.rDiv{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-end;
    height: 45%;
    position: relative;
}
.calendar{
    position: absolute;
    /* bottom: 0; */
    bottom: -10%;
    left: 0;
    display: flex;
}
.calendarImg{
    /* width: .9rem; */
    width: 1rem;
}
.calendarImg img{
    width: 100%;
}
.calendarRecord{
    margin: 0 0 0 .3rem;
    color: #E22318;
    font-size: .7rem;
    /* transform: scale(.85,.85); */
}
.goodses-detail_>div{
    width: 90%;
}
.goodses-price{
    font-size: .9rem;
    font-weight: bold;
    color: #F23030;
}
.goodes-register{
    /* transform: scale(.85,.85); */
    transform: scale(.9,.9);
    color: #666;
    margin-left: -.25rem;
}
.buyGoods span{
    display: inline-block;
    width: 4.5rem;
    height: 1.4rem;
    line-height: 1.5rem;
    border-radius: .3rem;
    background-color: #E22419;
    color: #fff;
}
.registered{
    background-color: #999!important;
}
.goodsTips span{
    margin-right: -25%;
    display: inline-block;
    /* transform: scale(.75,.75); */
    transform: scale(.9,.9);
    letter-spacing: .05rem;
    color: #666;
}
.goodsTips_>span{
    display: inline-block;
    margin-right: -20%;
    /* transform: scale(.8,.8); */
    transform: scale(.9,.9);
}
</style>